<template>
  <el-dialog title="镜片度数录入" :close-on-click-modal="false" :visible.sync="visible" append-to-body center fullscreen>
		<el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-divider content-position="left">度数录入</el-divider>
    <table class="miui-table">
      <tr>
        <td style="width: 55px;"></td>
        <td>球镜</td>
        <td>柱镜</td>
        <td>轴向</td>
       <td>Add</td>
        <td>三棱镜</td>
        <td>基底</td>
        <td>瞳距(远)</td>
        <td>瞳距(近)</td>
        <td>选择</td>
      </tr>
      <tr>
        <td>OD</td>
        <td><el-input v-model="dataFormOD.mirrorBall"></el-input></td>
        <td><el-input v-model="dataFormOD.columnMirror"></el-input></td>
        <td><el-input v-model="dataFormOD.axialDirection"></el-input></td>
        <td><el-input v-model="dataFormOD.add"></el-input></td>
        <td><el-input v-model="dataFormOD.arriseglass"></el-input></td>
        <td><el-input v-model="dataFormOD.basis"></el-input></td>
        <td><el-input v-model="dataFormOD.inter"></el-input></td>
        <td><el-input v-model="dataFormOD.interdistance"></el-input></td>
        <td>
          <el-button @click="addGoods('OD')">添加商品</el-button>
        </td>
      </tr>
      <tr>
        <td>OS</td>
        <td><el-input v-model="dataFormOS.mirrorBall"></el-input></td>
        <td><el-input v-model="dataFormOS.columnMirror"></el-input></td>
        <td><el-input v-model="dataFormOS.axialDirection"></el-input></td>
        <td><el-input v-model="dataFormOS.add"></el-input></td>
        <td><el-input v-model="dataFormOS.arriseglass"></el-input></td>
        <td><el-input v-model="dataFormOS.basis"></el-input></td>
        <td><el-input v-model="dataFormOS.inter"></el-input></td>
        <td><el-input v-model="dataFormOS.interdistance"></el-input></td>
        <td>
          <el-button @click="addGoods('OS')">添加商品</el-button>
        </td>
      </tr>
    </table>
    <el-divider content-position="left">商品列表</el-divider>
    <el-table :data="dataList" border style="width: 100%" :header-cell-style="{color:'#333',fontFamily:'MicrosoftYaHeiUI',fontSize:'14px',fontWeight:900,backgroundColor: '#fafafa'}">
        <el-table-column prop="code" label="商品代码" width="170"></el-table-column>
        <el-table-column prop="viewGoodsName" label="商品名称"></el-table-column>
        <el-table-column prop="glassFlag" label="镜片型" width="70"></el-table-column>
        <el-table-column prop="mirrorBall" label="球镜" width="60"></el-table-column>
        <el-table-column prop="columnMirror" label="柱镜" width="60"></el-table-column>
        <el-table-column prop="axialDirection" label="轴向" width="60"></el-table-column>
        <el-table-column prop="toTheLight" label="下加" width="60"></el-table-column>
        <el-table-column prop="arriseglass" label="棱镜" width="60"></el-table-column>
        <el-table-column prop="basis" label="基底" width="60"></el-table-column>
        <el-table-column prop="cstcpodpupilheight" label="瞳高" width="60"></el-table-column>
        <el-table-column prop="goodsQuantity" label="数量" width="120">
          <template slot-scope="scope">
            <el-input v-model="scope.row.goodsQuantity"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="cstcpodrequirement" label="加工要求" width="120"></el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="emptyData(scope.row.glassFlag)">清空</el-button>
          </template>
        </el-table-column>
      </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" style="margin-right: 15px;" @click="dataFormSubmit" v-prevent-re-click>选 择</el-button>
    </span>
    <!-- 弹窗，查找商品 -->
    <search-goods v-if="goodsVisible" ref="goodsDialog" @refreshData="updateFormData"></search-goods>
  </el-dialog>
</template>

<script>
    import { getConsignSaleById,consignAgainAdd } from '@/api/eims/consign/consignOrder'
    import {fetchTree} from '@/api/admin/dept.js'
    import { mapGetters } from 'vuex'

    import SearchGoods from './SearchGoods'

    export default {
    data () {
      return {
        visible: false,
        dataForm: {},
        dataFormOD: {
          glassFlag: 'R'
        },
        dataFormOS: {
          glassFlag: 'L'
        },
        dataList: [],
        goodsVisible: false
      }
    },
    computed: {
        ...mapGetters(['permissions','bizData','userInfo'])
    },
    components: {
      SearchGoods
    },
    methods: {
      init (data) {
        this.visible = true
        this.dataForm = data
        this.dataList = [{},{}]
      },
      //  添加商品
      addGoods(type) {
        let params = {}
        if(type == 'OD'){
          if(!this.dataFormOD.mirrorBall){
            this.$message.warning('右眼球镜不能为空')
            return false
          }
          if(!this.dataFormOD.columnMirror && this.dataForm.ctgId == '3'){
            this.$message.warning('右眼柱镜不能为空')
            return false
          }
          params = this.dataFormOD
        }else if(type == 'OS'){
          if(!this.dataFormOS.mirrorBall){
            this.$message.warning('左眼球镜不能为空')
            return false
          }
          if(!this.dataFormOS.columnMirror && this.dataForm.ctgId == '3'){
            this.$message.warning('左眼柱镜不能为空')
            return false
          }
          params = this.dataFormOS
        }
        let data = {
          dataForm: this.dataForm,
          params: params,
          list: this.dataList
        }
        this.goodsVisible = true
        this.$nextTick(() => {
          this.$refs.goodsDialog.init(data)
        })
      },
      //  获取商品数据
      updateFormData(data) {
        this.dataList = [...data]
      },
      //  清空
      emptyData(type) {
        if(type == 'R'){
          this.dataList.splice(0,1,{})
        }else{
          this.dataList.splice(1,1,{})
        }
      },
      //  选择商品
      dataFormSubmit() {
        this.$emit('refreshData',this.dataList)
        this.visible = false
      }



    }
  }
</script>

<style lang="scss" scoped="scoped">
  .row-bg {
    background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
  }
  .width-125 {
    width: 125px;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #e7e7e7;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
  }
</style>
